<template>
	<div class="teamplate-card body-groundcolor">
		<div class="container width font-size12 ">
			<div class="row back-groundcolor border-radius">
				<div class="col-lg-12 font-color">
					ID:{{details1.cardid}}
				</div>
			</div>
			<div class="row cardEditContent" style="padding-top:20px">
				<div class="col-lg-3 col-md-3 col-sm-3">
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<span style="color:red;">✲</span>
							<label class="">卡号</label>
							<input type="text" class="form-control inputT addCardNumbeq" v-model="details1.kkhcode">
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>发卡日期</label>
							<input type="text"  class="form-control inputT addData"  v-model="details1.fkrq" readonly>
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>有效期</label>
							<input type="text" class="form-control inputT addValidity"  v-model="details1.sxrq" readonly>
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>累计消费</label>
							<input type="text" class="form-control inputT addCumulative"  v-model="details1.ljxfe" readonly>
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>积分</label>
							<input type="text" class="form-control inputT addIntegral"  v-model="details1.jifen" readonly>
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>已换积分</label>
							<input type="text" class="form-control inputT addInIntegral"  v-model="details1.ydjifen" readonly>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3">
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<span style="color:red;">✲</span>
							<label>姓名</label>
							<input type="text" class="form-control inputT addNameq" v-model="details1.kkhname">
						</div>

					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<span style="color:red;">✲</span>
							<label>电话</label>
							<input type="text" class="form-control inputT addPhoneq" v-model="details1.callnum">
						</div>

					</div>
					<div class="form-inline margin-top5  text-right">
						<label >性别</label>
						<div class="inputT form-group sexadd">
						<div class="radio ">
							<label>
									<input type="radio" name="optionsRadios" id="optionsRadios1" v-model="details1.sexid" value="男" > 男生
							</label>
						</div>
						<div class="radio radioLeft">
							<label>
									<input type="radio" name="optionsRadios" id="optionsRadios2" v-model="details1.sexid" value="女">女生
							</label>
						</div>
						</div>
					</div>
					<div class="control-group form-group margin-top5 text-right">
						<span style="color:red;">✲</span>
						<label class="control-label">出生日期</label>
						<div class="controls input-append date" style="display:inline-block;">
							<input size="16" type="text" @change="check" v-model="details1.crsq" style="padding:0px" id="txt_calendar" class="data form_date form-control">
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>联系地址</label>
							<input type="text" class="form-control inputT addAddress " v-model="details1.zyaddress">
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>邮箱</label>
							<input type="text" class="form-control inputT addEmail " v-model="details1.email">
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3">
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label >慢性病史</label>
							<input  type="text" class="form-control inputT addChronicTree" v-model="details1.manxbs">
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>药物过敏史</label>
							<input type="text" class="form-control inputT addHistoryOfDrug" v-model="details1.yongygms">
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>备注</label>
							<textarea  class="form-control inputT preservation addRemark" rows="3" v-model="details1.beizhu"></textarea>
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>是否发放会员实体卡</label>
							<select class="form-control selectedHello" id="is_faka" >
								<option v-for=" item in items" :value="item.value" >{{item.text}}</option>
							</select>
						</div>
					</div>
					<div class="form-inline margin-top5 text-right">
						<div class="form-group ">
							<label>是否是管理员</label>
							<select class="form-control selectedWarden" id="boss"  >
								<option v-for=" item in items" :value="item.value" >{{item.text}}</option>
							</select>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 cardExchange"  data-toggle="modal" data-target="#myModald">
					<div class="cardExchangeContents">
					<span><img  :src="cfg.assets+'/images/jifen.png'"></span>
					<span class="text-rigth">积分兑换单</span>
					</div>
				</div>
			</div>
			<div class="row cardEditContent  text-right  padding-bottom padding-top20" style="padding-right:20px;">
				<button type="button" class="btn btn-default" @click="cancelEditAdd"  data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" @click="saveEditAdd">保存</button>
			</div>
		</div>
		<!-- 模态框（Modal）积分兑换单 -->
		<div class="modal fade" id="myModald" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
			<div class="modal-dialog" style="width: 45%;margin-top: 100px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">积分兑换单</h4>
					</div>
					<div class="modal-body">
						<div class="">
							<div class="row font-color-g">
								<div class="col-lg-4 col-md-4 col-sm-4">
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
                                           <label class="">日期(D)</label>
											<input type="text" class="form-control inputT" readonly="readonly" id="j_current_date">
										</div>
									</div>
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label >有效期至</label>
											<input  type="text" class="form-control inputT" readonly="readonly" :value="details1.sxrq">
										</div>
									</div>
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>会员卡号(W)</label>
											<input type="text" class="form-control inputT" readonly="readonly" :value="details1.kkhcode">
										</div>
									</div>
									<div class="form-inline margin-top5 text-right" >
										<div class="form-group ">
											<label>联系电话(N)</label>
											<input type="text" class="form-control inputT" readonly="readonly" :value="details1.callnum">
										</div>
									</div>
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>联系地址</label>
											<input type="text" class="form-control inputT" readonly="readonly" :value="details1.zyaddress">
										</div>
									</div>
								</div>
								<div class="col-lg-4 col-md-4 col-sm-4">
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
                                            <label>兑换人(Y)</label>
											<input type="text" class="form-control inputT" readonly="readonly" :value="transactor">
										</div>
									</div>
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
                                            <label>会员姓名</label>
											<input type="text" class="form-control inputT" readonly="readonly" :value="details1.kkhname">
										</div>
									</div>
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
                                            <label>累计消费</label>
											<input type="text" class="form-control inputT" readonly="readonly" :value="details1.ljxfe">
										</div>
									</div>
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
                                            <label>出生日期</label>
											<input type="text" class="form-control inputT" readonly="readonly" :value="details1.crsq">
										</div>
									</div>
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>发卡日期</label>
											<input type="text" class="form-control inputT" readonly="readonly"  :value="details1.fkrq">
										</div>
									</div>
								</div>
								<div class="col-lg-4 col-md-4 col-sm-4">
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>部门(B)</label>
											<select class="form-control inputT" id="j_department">
												<option></option>
												<option v-for="(item,index) in department">{{item.bm}}</option>
											</select>
										</div>
									</div>
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label >积分</label>
											<input  type="text" class="form-control inputT" :value="details1.jifen" readonly="readonly">
										</div>
									</div>
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label style="color:red;">兑换积分</label>
											<input type="text" class="form-control inputT" v-model="dhjf">
										</div>
									</div>
									<div class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>备注</label>
											<textarea  class="form-control inputT preservation bzz" rows="3" v-model="remarks"></textarea>
										</div>
									</div>
                                </div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<div style="display:inline-block;">
						<span style="color:red;text-align:center;">注:备注填写兑换物品及数量!</span>
						</div>
						<div style="display:inline-block;">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary"  @click="jifen">保存</button>
						</div>
					</div>
				</div>
            </div>
		</div>
	</div>
</template>
<script>
    export default {
        components: {},
        data() {
            return {
                tabs: ["购买记录"],
                num: 0,
                on: false,
                items: [{
                    text: "是",
                    value: "1"
                }, {
                    text: "否",
                    value: "0"
                }],
                sex: [{
                    text: "男生",
                    value: "1"
                }, {
                    text: "女生",
                    value: "0"
                }],
                details1: {},
                department: [], //部门
                transactor: '', //兑换人
                remarks: '无', //备注
                dhjf: '', //兑换积分
            };
        },
        watch: {},
        methods: {
            check(e) {
                let me = this;
                var a = /^(\d{4})-(\d{2})-(\d{2})$/;
                if (!a.test($(".data").val())) {
                    layer.msg("日期格式不正确!");
                    return false;
                }
            },
            cancelEditAdd(e) {
                this.$router.push({
                    path: "/adminCard"
                });
            },
            jifen(e) {
                let me = this;
                console.log(me.dhjfState);
                if (me.transactor != '' && me.dhjf != '') {
                    if (me.dhjf <= me.details1.jifen) {
                        var prams = {
                            bm: $("#j_department option:selected").val(),
                            ywy: me.transactor,
                            cardid: me.details1.kkhcode,
                            dhjf: me.dhjf,
                            bzz: me.remarks
                        };
                        console.log(prams);
                        $.ajax({
                            type: "POST",
                            url: me.cfg.api + "/huiyuan/addHuiYuiJiFenDuiHuan",
                            data: prams,
                            dataType: "json"
                        }).done(function(data) {
                            if (data.code == 200) {
                                layer.alert(data.message);
                                $("#myModald").modal("hide");
                            } else {
                                layer.alert(data.message);
                            }
                        });
                    } else {
                        layer.alert("兑换积分大于现有积分");
                    }
                } else {
                    layer.alert("部门与兑换积分不能为空");
                }
            },
            saveEditAdd(e) {
                let me = this;
                let req = /^1[3|4|5|7|8][0-9]{9}$/; //手机号的正则验证
                var def = 1;
                $("input[type=radio][name=def][value='" + def + "']").prop(
                    "checked",
                    true
                );
                // 编辑会员信息
                me.cardAddq = $(".addCardNumbeq").val(); //会员卡号
                me.nameAddq = $(".addNameq").val(); //会员姓名
                me.phoneAddq = $(".addPhoneq").val(); //会员手机号
                me.selectedHello = $(".selectedHello").val(); //是否发放会员实体卡
                alert(me.selectedHello);
                alert(me.phoneAddq);
                if (me.selectedHello == "1") {
                    me.selectedHello = "是";
                } else {
                    me.selectedHello = "否";
                }
                if (me.cardAddq == "") {
                    layer.alert("会员卡号不能为空");
                    return false;
                } else {
                    if (me.cardAddq != me.details1.kkhcode) {
                        // 校验会员卡号
                        $.ajax({
                            type: "get",
                            url: me.cfg.api + "/huiyuan/selectOneKkhcode",
                            data: {
                                kkhcode: me.cardAddq
                            },
                            dataType: "json"
                        }).done(function(data) {
                            console.log("===校验会员卡号===");
                            console.log(data);
                            me.cardServerce = data.data;
                            if (!(data.data == null)) {
                                layer.alert("您的会员卡号已存在");
                                return false;
                            }
                        });
                    }
                }
                if (me.nameAddq == "") {
                    layer.alert("姓名不能为空");
                    return false;
                }
                if (me.phoneAddq == "") {
                    layer.alert("手机号不能为空");
                    return false;
                } else {
                    // else if(!(req.test(me.phoneAddq))){
                    //     layer.alert("请输入正确的手机号");
                    //     return false;
                    // }
                    if (me.phoneAddq != me.details1.callnum) {
                        // 校验手机号
                        $.ajax({
                            type: "get",
                            url: me.cfg.api + "/huiyuan/selectOneCallnum",
                            data: {
                                callnum: me.phoneAddq
                            },
                            dataType: "json"
                        }).done(function(data) {
                            console.log("===校验手机号===");
                            console.log(data);
                            me.phoneServerce = data.data;
                            if (!(data.data == null)) {
                                layer.alert("您的手机号已存在");
                                return false;
                            }
                        });
                    }
                }
                let parms = {
                    cardid: me.details1.cardid, //会员号
                    kkhcode: me.cardAddq, //会员卡号
                    kkhname: me.nameAddq, //会员姓名
                    sxrq: me.details1.sxrq, //会员卡失效日期
                    beizhu: $(".addRemark").val(), //备注
                    koulv: me.details1.koulv, //会员折扣率（默认100）
                    is_faka: me.selectedHello, //是否发放实体会员卡
                    fdbs: me.details1.fdbs, //分店标识
                    crsq: $("#txt_calendar").val(), //出生日期
                    callnum: me.phoneAddq, //手机号
                    zyaddress: $(".addAddress").val(), //家庭地址
                    manxbs: $(".addChronicTree").val(), //慢性病史
                    yongygms: $(".addHistoryOfDrug").val(), //用药过敏史
                    sexid: me.details1.sexid, //性别
                    boss: $("#boss option:selected").val(), //是否是管理员（是：1，否 0）
                    email: $(".addEmail").val()
                };
                console.log(parms, "编辑会员");
                $.ajax({
                    type: "post",
                    url: me.cfg.api + "/huiyuan/updateHuiyuan",
                    data: parms,
                    dataType: "json"
                }).done(function(data) {
                    console.log("===编辑会员信息===");
                    console.log(data);
                });

                this.$router.push({
                    path: "/adminCard"
                });
            }
        },
        mounted() {
            let me = this;
            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                });
                return;
            }
            let time = new Date();
            let currentDate = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + me.util.string.numFix(time.getDate()); //默认结束日期
            $('#j_current_date').val(currentDate);

            $(".form_date").datetimepicker({
                language: "zh-CN",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });
            me.details = sessionStorage.getItem("details");
            console.log(me.details, "获取会员id");
            $.ajax({
                type: "get",
                url: me.cfg.api + "/huiyuan/selectHuiYuanDetail",
                data: {
                    cardid: me.details
                },
                dataType: "json"
            }).done(function(data) {
                me.details1 = data.data;
                console.log(me.details1, "===会员详情===");
                sessionStorage.setItem("details", me.details);
                if (me.details1.boss == 0) {
                    $("#boss option[value='0']").attr("selected", "selected");
                } else if (me.details1.boss == 1) {
                    $("#boss option[value='1']").attr("selected", "selected");
                } else {
                    $("#boss option[value='0']").attr("selected", "selected");
                }
                if (me.details1.is_faka == "是") {
                    $("#is_faka option[value='1']").attr("selected", "selected");
                } else {
                    $("#is_faka option[value='0']").attr("selected", "selected");
                }
            });
            let res = {
                pageName: 'MXLS_SHOW',
                sktid: localStorage.getItem("sktId")
            }
            me.transactor = user.shky;
            me.service.indexLsNew(me, res, data => {
                me.department = data.data.bmDoc;
                console.log(me.department, 74747474, data.data.bmDoc);
            });

        }
    };
</script>